<div class="container">
    <div class="header">
        <button class="btn btn-secondary btn-sm" (click)="resetDefault()" type="button">{{ "contents.viewReset" | sqxTranslate }}</button>
    </div>

    <hr />

    <div cdkDropList [cdkDropListData]="listFields" (cdkDropListDropped)="drop($event)">
        @for (field of listFields; track field) {
            <div cdkDrag>
                <i class="icon-drag2 drag-handle"></i>
                <div class="form-check">
                    <input class="form-check-input" id="field_{{ field }}" checked (click)="removeField(field)" [disabled]="!field" type="checkbox" />
                    <label class="form-check-label" for="field_{{ field }}">
                        @if (field.name) {
                            <span>
                                {{ field.title || field.label | sqxTranslate }}: <code>{{ field.name }}</code>
                            </span>
                        }

                        @if (!field.name) {
                            <span class="text-muted">- Placeholder -</span>
                        }
                    </label>
                </div>
            </div>
        }
    </div>

    @if (fieldsNotAdded.length > 0) {
        <hr />

        <div>
            @for (field of fieldsNotAdded; track field) {
                <div>
                    <i class="icon-drag2 drag-handle invisible"></i>
                    <div class="form-check">
                        <input class="form-check-input" id="field_{{ field }}" (click)="addField(field)" type="checkbox" />
                        <label class="form-check-label" for="field_{{ field }}">
                            @if (field.name) {
                                <span>
                                    {{ field.title || field.label | sqxTranslate }}: <code>{{ field.name }}</code>
                                </span>
                            }

                            @if (!field.name) {
                                <span class="text-muted">- Placeholder -</span>
                            }
                        </label>
                    </div>
                </div>
            }
        </div>
    }
</div>
